import React, { Component } from 'react';
import { MoreOutline, LeftOutline } from 'antd-mobile-icons'
import '../style/Index/Address/adddetail.css'
import { Form, Input, Switch, Button, Toast } from 'antd-mobile'
import { Cascader } from 'antd-mobile'
import { options } from './data'
import services from '../api/interface'

class AddDetail extends Component{
    state = {
        setVisible: false, value: ['']
    }
    
    confirm(nall) {
        this.setState({ value: nall })
    }
    onClick() {
        this.props.history.go(-1)
    }
    
    formRef = React.createRef()
    //修改地址
    componentDidMount(){
        {
            this.props.location.state != undefined &&
                this.formRef.current?.setFieldsValue(this.props.location.state.data);
        }

    }
    //添加地址
    async onFinsh(value) {
        var addDate = this.state.value
        // console.log(value.name);
        if (this.props.location.state != undefined) {
          var aw=await services.address.address_update({ 
            addressid:this.props.location.state.addressid,
            name: value.name,
            tel: value.tel,
            addressDetail: value.addressDetail,
            province: addDate[0],
            city: addDate[1],
            county: addDate[2],
            isDefault: addDate.delivery,
            userid: localStorage.getItem('userid'),
            token: localStorage.getItem('token')
            })
            if (aw.data.code == 200) {
                Toast.show({
                    icon: 'success',
                    content: '修改成功！',
                })
                this.props.history.push('/address')
            }

        } else {

            var res2 = await services.address.address_add({
                name: value.name,
                tel: value.tel,
                addressDetail: value.addressDetail,
                province: addDate[0],
                city: addDate[1],
                county: addDate[2],
                isDefault: addDate.delivery,
                userid: localStorage.getItem('userid'),
                token: localStorage.getItem('token')
            })
            if (res2.data.code == 200) {
                Toast.show({
                    icon: 'success',
                    content: '新增成功！',
                })
                this.props.history.push('/address')
            }
        }
    }






    render() {
        return (
            <div className='adddetail'>
                <div className='dnavbar'>
                    <span onClick={() => { this.onClick() }}><LeftOutline /></span>
                    <div>添加地址</div>
                    <div className='dmicon'>
                        <MoreOutline />
                    </div>
                </div>
                <div className="adddetail_main">
                    <div className="addtetail_form">

                        <Form layout='horizontal' mode='card' onFinish={(value) => { this.onFinsh(value) }} ref={this.formRef}
                            footer={
                                <Button
                                    block type='submit' color='primary' size='large'
                                >
                                    提交
                                </Button>
                            }>

                            <Form.Header>     </Form.Header>
                            <Form.Item name='name' label='姓名' rules={[{ required: true, message: '姓名不能为空' }]} >
                                <Input placeholder='请输入姓名' />
                            </Form.Item>
                            <Form.Item name='tel' label='电话' rules={[{ required: true, message: '电话不能为空' }]}>
                                <Input placeholder='请输入电话' />
                            </Form.Item>
                            <Form.Item label='地区' rules={[{ required: true, message: '地区不能为空' }]}>
                                <Input value={this.state.value} placeholder='请输入地区' onClick={() => {
                                    this.setState({
                                        setVisible: true
                                    })

                                }} />
                                <Cascader
                                    onConfirm={(value) => {
                                        // this.setState({
                                        //     value: value
                                        // })
                                        this.confirm(value)
                                    }}
                                    value={this.state.value}
                                    options={options}
                                    visible={this.state.setVisible}
                                    onClose={() => {
                                        this.setState({
                                            setVisible: false
                                        })
                                    }}
                                />
                            </Form.Item>
                            <Form.Item name='addressDetail' label='详细地址' rules={[{ required: true, message: '地址不能为空' }]}>
                                <Input placeholder='请输入详细地址' />
                            </Form.Item>
                            <Form.Header />
                            <Form.Item
                                name='delivery'
                                label='默认收货地址'
                                childElementPosition='right'
                            >
                                <Switch />
                            </Form.Item>

                        </Form>
                    </div>
                    {/* <button className='detail_button' onClick={() => { this.onClicksave() }}>保存</button> */}
                </div>


            </div>
        );
    }
}

export default AddDetail;